<template>
	<view class="flex_r operate-box" v-if="show" :style="[Style]" @click="show = false">
		<view :class="{ flex1: isSelf }" style="transition: all 0.2s"></view>
		<view class="flex_r operate">
			<view class="flex_c_c size_white operate-item" v-for="(item, index) in list" :key="index"
				@click.stop="onClick(item)" v-if="item.icon">
				<view class="operate-item-icon">
					<image class="img" :src="item.icon" mode="aspectFill"></image>
				</view>
				<view class="text_24">
					{{ item.title }}
				</view>
			</view>
			<view class="operate-str" :style="[StyleStr]"></view>
		</view>
	</view>
</template>

<script>
	// import { 自己的信息 } from '@/TEST/index';
	// import { getLocation, show } from '@/utils/index.js';
	const transmit = {
		type: 'transmit',
		icon: '',
		title: '转发'
	};
	const copy = {
		type: 'copy',
		icon: '',
		title: '复制'
	};
	const down = {
		type: 'down',
		icon: '',
		title: '下载'
	};
	const hide = {
		type: 'hide',

		icon: '',
		title: '隐藏'
	};
	const quote = {
		type: 'quote',
		icon: '',
		title: '引用'
	};
	const thank = {
		type: 'thank',
		icon: '',
		title: '谢谢'
	};
	const map = {
		type: 'map',
		icon: '',
		title: '导航'
	};
	const deletex = {
		type: 'delete',
		icon: '',
		title: '删除'
	};

	const add_emoji = {
		type: 'add_emoji',
		icon: '',
		title: '添加'
	};
	
	const retractx = {
		type: 'retractx',
		icon: '',
		title: '撤回'
	};

	export default {
		data() {
			return {
				show: false,
				item: {},
				index: 0,
				list: [],
				style: {},
				styleStr: {}
			};
		},
		computed: {
			Style() {
				const style = this.style;
				return style;
			},
			StyleStr() {
				const style = this.styleStr;
				style.transition = 'all 0.2s';
				return style;
			},
			// 是否本人isMy
			isSelf() {
				return this.item.flow == 'out'
			}
		},
		methods: {
			open(item, index, e,isyou) {
				this.index = index
				this.item = item;
				this.init(item, isyou);
				let top = e.top;
				let title = this.list[this.list.length - 1].title;
				let length = this.list.length;
				if (!title) {
					length = length - 1;
				}
				if (length >= 5) {
					top = e.top - uni.upx2px(100);
				}
				this.style = {
					top: `${top - uni.upx2px(160)}px`
				};
				const value = (e.right - e.left) / 2 + uni.upx2px(122);
				this.styleStr = {
					top: `${e.top - uni.upx2px(31)}px`,
					left: `${value + uni.upx2px(122)}px`
				};
				if (this.isSelf) {
					this.styleStr = {
						top: `${e.top - uni.upx2px(31)}px`,
						right: `${value}px`
					};
				} else {
					this.styleStr = {
						top: `${e.top - uni.upx2px(31)}px`,
						left: `${value}px`
					};
				}
				this.show = true;
			},
			init(item, isyou) {
				const messageTime = item.time; // 消息时间戳（1761620842 格式）
				const currentTime = Math.floor(Date.now() / 1000); // 当前时间戳（秒）
				// 计算时间差（秒），转换为分钟
				const timeDiffMinutes = (currentTime - messageTime) / 60;
				let list = [quote, deletex];
				if (item.type === 'TIMTextElem') {
					list.unshift(copy);
				}
				if (item.type === 'TIMVideoFileElem' || item.type === 'TIMImageElem') {
					list.unshift(down);
				}
				if (isyou && timeDiffMinutes < 2) {
					list.unshift(retractx);
				}
				this.list = list;
			},
			close() {
				if (!this.show) return;
				this.show = false;
			},
			onClick(item) {
				switch (item.type) {
					case 'copy':
						// 复制
						uni.setClipboardData({
							data: this.item.payload.text,
							showToast: true,
							success: () => {}
						});
						break;
					case 'delete':
						// 删除
						this.deleteMessage();
						break;
					case 'down':
						// 下载
						this.downFun();
						break;
					case 'hide':
						//隐藏
						this.item.isHide = 1;
						break;
					case 'quote':
						// 引用
						this.quote();
						break;

					case 'retractx':
						// 撤回
						this.recallMessage();
						break;
					case 'thank':
						// 引用
						this.$emit('thank', this.item);
						break;
					case 'map':
						// 导航
						getLocation({
							name: this.item.payload.title,
							address: this.item.payload.address,
							latitude: this.item.payload.latitude,
							longitude: this.item.payload.longitude
						});
						break;
					case 'add_emoji':
						// 添加为表情包
						this.add_emoji();
						break;

					default:
						break;
				}
				this.close();
			},
			//下载 图片或者视频
			downFun() {
				console.log('这里是下载', this.item);
				if (this.item.type == "TIMImageElem") {
					uni.downloadFile({
						url: this.item.payload.imageInfoArray[0].url, //仅为示例，并非真实的资源
						success: (res) => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										uni.showToast({
											title: '保存成功',
											icon: 'none',
											duration: 2000,
											mask: true
										});
									},
									fail: function(err) {
										console.log(err);
										uni.showToast({
											title: '保存失败',
											icon: 'none'
										});
									}
								});
							}
						}
					});

				} else {
					uni.downloadFile({
						url: this.item.payload.videoUrl, //仅为示例，并非真实的资源
						success: (res) => {
							if (res.statusCode === 200) {
								uni.saveVideoToPhotosAlbum({
									filePath:res.tempFilePath,
									success: function() {
										uni.showToast({
											title: '保存成功',
											icon: 'none',
											duration: 2000,
											mask: true
										});
									},
									fail: function(err) {
										console.log(err);
										uni.showToast({
											title: '保存失败',
											icon: 'none'
										});
									}
								});
							}

						},
					})
				}
			},
			// 删除
			deleteMessage() {
				uni.showModal({
					content: '删除该条信息？不可恢复！',
					success: (res) => {
						if (res.confirm) {
							this.$emit('deleteMessage', {
								item: this.item,
								index: this.index
							})
						} else if (res.cancel) {}
					}
				});
			},
			// 添加为表情包
			async add_emoji() {
				const {
					url,
					path = ''
				} = this.item.payload;
				const res = await this.API_collectEmoji(url, path);
				if (res) {
					uni.$emit('collectionEmoji', {
						url,
						path
					});
					uni.$off('collectionEmoji');
				}
			},
			// 引用
			quote() {
				this.$emit('quote', this.item);
			},
			// 撤回
			recallMessage() {
				uni.showModal({
					content: '撤回该条信息？',
					success: (res) => {
						if (res.confirm) {
							this.item.recalled = true
							this.$emit('revoke', this.item);
						} else if (res.cancel) {}
					}
				});
			},

			API_collectEmoji(url, path) {
				return new Promise((res) => {
					http.get(
						'Emoji/collectEmoji', {
							url,
							path
						},
						true,
						(r) => {
							if (r.data.code == 0) return res(r);
							return show(r.data.msg), res(false);
						}
					);
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex_c_c {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.operate-box {
		position: fixed;
		z-index: 9;
		left: 122rpx;
		width: calc(100vw - 244rpx);
		transition: all 0.2s;
	}

	.operate_box {
		flex-direction: row-reverse;
	}

	.operate {
		position: relative;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 14rpx;
		background-color: #4c4c4c;
		max-width: 440rpx;
		box-shadow: rgba(76, 76, 76, 0.3) 0rpx 2rpx 20rpx;
		flex-wrap: wrap;

		.operate-item-icon {
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 6rpx;
			.img{
				width: 40rpx;
				height: 40rpx;
			}
		}

		.operate-item {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.operate-str {
		position: fixed;
		width: 18rpx;
		height: 18rpx;
		border-radius: 2px;
		transform: rotate(45deg);
		background-color: #4c4c4c;
		transition: all 0.2s;
	}

	.text_24 {
		color: #fff;
		font-size: 24rpx;
	}
</style>